<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01_Proxy-(ES5)监听对象属性的操作</title>
</head>
<body>

  <script>
    const obj = {
      name: '张三',
      age: 18,
      address: '北京'
    }

    // 监听对象属性的操作
    // 需求: 监听对象属性的所有操作
    // 监听属性的操作
    // let _name = obj.name
    // Object.defineProperty(obj, 'name', {
    //   get() {
    //     console.log('get name')
    //     return _name
    //   },
    //   set(value) {
    //     console.log('set name')
    //     _name = value
    //   }
    // })

    // let _age = obj.age
    // Object.defineProperty(obj, 'age', {
    //   get() {
    //     console.log('get age')
    //     return _age
    //   },
    //   set(value) {
    //     console.log('set age')
    //     _age = value
    //   }
    // })

    // 2.监听所有的属性: 遍历所有的属性, 对每一个属性使用defineProperty
    for (let key in obj) {
      let _value = obj[key]
      Object.defineProperty(obj, key, {
        get() {
          console.log(`get ${key}`)
          return _value
        },
        set(value) {
          console.log(`set ${key}`)
          _value = value
        }
      })
    }

    obj.name = '李四'
    console.log(obj.name)
    obj.age = 20
    console.log(obj.age)

    // 什么是响应式: 当数据变化时, 会自动更新视图
    // 1. 数据变化: obj.name = '李四'
    // 2. 视图更新: console.log(obj.name)
    // const nameEl = document.querySelector(".name")
    // nameEl.textContent = obj.name
    // obj.name = "kobe"
    // obj.name = "james"


  </script>
  
</body>
</html>